import React, { Component } from 'react'
import './style.less'
import ListImg from '../../static/icon/list.png'
var listData = require('../../data/ListData/data.js')

export default class List extends Component{
  constructor(){
    super();
    this.state = {
      listData: []
    }
  }

  componentDidMount(){
    let data = this.props.listData
    this.setState({
      listData: listData[data]
    })
  }

  render(){
    return(
      <div className="list clearfix">
        <ul>
          {
            this.state.listData.map((item,index) => {
              return (
                <li className="clearfix" key={index}>
                  <img src={ListImg} className="list-img" alt="" />
                  <div className="list-right">
                    <h3>{item.title}</h3>
                    <p>{item.author}</p>
                    <div className="clearfix">
                      <span className="time">时长: {item.timer}</span>
                      {
                        item.purchase ? <span className="purchase">已购买</span>
                                      : <span className="purchasePeople">已有: {item.people}购买</span>
                      }
                    </div>
                  </div>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}
